<template>
  <div id="shop-item">
    <div class="item-selectop">
      <check-button :is-checked="product.checked"  @click.native="checkClick" />
    </div>
    <div class="item-img">
      <img :src="product.img" alt="商品图片" />
    </div>
    <div class="item-info">
      <div class="item-title">{{ product.title }}</div>
      <div class="item-desc">{{ product.desc }}</div>
      <div class="info-bottom">
        <div class="item-price">￥{{ product.price }}</div>
        <div class="item-count">x{{ product.count }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import CheckButton from '@/components/content/checkbutton/CheckButton.vue';
export default {
  components: { CheckButton },
  name: "Cartlistitem",

  data() {
    return {};
  },
  props: {
    product: {},
  },
  mounted() {},

  methods: {
    checkClick(){
      this.product.checked = !this.product.checked
    }
  },
};
</script>

<style lang="css" scoped>
#shop-item {
  margin-top: 2vw;
  
  height: 30vw;
  width: 100%;
  /* background: #000; */
  /* border: 1px solid black; */
  border-bottom: 1px solid #ddd;
  position: relative;
}
.item-selectop{
  float: left;
}
img {
  height: 30vw;
  width: 20vw;
  float: left;
  border-radius: 3vw;
  padding-bottom: 2vw;
}
.item-title,
.item-desc {
  padding-left: 3vw;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding-top: 3vw ;
}
.item-desc{
  font-size: 3vw;
}
.info-bottom{
  margin-top: 4vw;
}
.item-price{
  float: left;
  padding-left: 3vw;
  color: var(--color-high-text);
}
.item-count{
  float: right;
  padding-right: 2vw;
}
.item-selectop{
  width: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10vw;
  margin-right: 2vw;
}
</style>